<script setup lang="ts">
import { menuApi } from "@/api/admin/menu";
import {
  ElTable,
  ElTableColumn,
  ElButton,
  ElSpace,
  ElCard,
  ElTag,
  ElInput,
  ElMessage,
  ElPopconfirm,
} from "element-plus";
import { onMounted, ref, watch } from "vue";
import { MyIcon } from "@/components/MyIcon";
import { debounce, deepClone } from "@/utils";
import MenuForm from "./component/MenuForm.vue";
const MenuFormRef = ref();

// 菜单表格
const menuTable = ref<any>([]);

const menuTree = ref<any>([]);

// 所有菜单key
const menuAllKeys = ref([]);

// 查询参数
const params = ref({
  title: "",
});

// 是否展开
const isExpand = ref(false);

// 展开行keys
const expandRowKeys = ref([]);

// 获取菜单树结构数据
const getMenuTree = async () => {
  const menuTreeRes = await menuApi.getRoutesMenuTreeApi(params.value.title);

  menuTree.value = menuTreeRes;
  menuTable.value = menuTreeRes;
  // 提取所有key
  const extractKey = (data: any) => {
    return data.reduce((pre: string[], cur: any) => {
      pre.push(cur.id);
      if (cur.children) {
        pre.push(...extractKey(cur.children));
      }
      return pre;
    }, []);
  };
  const keys = extractKey(menuTreeRes);
  menuAllKeys.value = keys;
};
onMounted(() => {
  getMenuTree();
});

// 展开所有
const expandAll = () => {
  isExpand.value = true;
  expandRowKeys.value = menuAllKeys.value;
};

// 收起所有
const collapseAll = () => {
  isExpand.value = false;
  expandRowKeys.value = [];
};

// 防抖查询
const debounceQuery = debounce(() => {
  getMenuTree();
}, 500);

// 监听params.title
watch(
  () => params.value.title,
  () => {
    debounceQuery();
  }
);

//

// import { ElButton, ElSpace } from "element-plus";
// const handleQuery = () => {
//   console.log("查询");
// };
// 添加数据
const handleAdd = () => {
  MenuFormRef.value.open();
};
// 编辑数据
const handleEdit = (row: any) => {
  const newRow = deepClone(row);
  delete newRow.updateTime;
  delete newRow.createTime;
  MenuFormRef.value.open(newRow);
};
// 删除数据
const handleDel = async (id: string) => {
  const ret = await menuApi.removeRoleRoutesApi(id);
  if (ret.code === 200) {
    ElMessage.success("删除成功");
    getMenuTree();
  } else {
    ElMessage.error(ret.data.msg);
  }
};

// 是否有子菜单
const hasChildren = (row: any) => {
  return row.children && row.children.length > 0;
};

</script>

<template>
  <div>
  <el-card shadow="never">
    <MenuForm ref="MenuFormRef" @update="getMenuTree" :menuTree="menuTree" />
    <div class="menu">
      <div class="menu-top">
        <div class="menu-top-left">
          <el-button @click="getMenuTree" type="" icon="Refresh" />
          <el-button @click="handleAdd" v-per="'menus_save'" type="primary">添加</el-button>
          <!-- <el-button type="primary">批量修改</el-button>
          <el-button type="danger">批量删除</el-button> -->
          <el-button v-if="!isExpand" @click="expandAll" type="success">展开所有</el-button>
          <el-button v-else @click="collapseAll" type="success">收起所有</el-button>
        </div>
        <div class="menu-top-right">
          <el-input clearable v-model="params.title" placeholder="请输入" />
        </div>
      </div>
    </div>
  </el-card>
  <el-table :expand-row-keys="expandRowKeys" :data="menuTable" style="width: 100%" row-key="id">
    <el-table-column type="selection" width="55" />
    <el-table-column label="标题">
      <template #default="scope">
        <span>{{ scope.row.meta.title }}</span>
      </template>
    </el-table-column>
    <el-table-column label="图标" align="center" width="85">
      <template #default="scope">
        <span v-if="scope.row.meta?.icon">
          <el-tag type="primary">
            <MyIcon :icon="scope.row.meta.icon"></MyIcon>
          </el-tag>
        </span>
      </template>
    </el-table-column>
    <el-table-column property="name" align="center" label="名称" />
    <el-table-column label="是否隐藏" align="center">
      <template #default="scope">
        <span>{{ scope.row.meta.hidden ? "是" : "否" }}</span>
      </template>
    </el-table-column>
    <el-table-column property="updateTime" align="center" label="修改时间" />
    <el-table-column label="操作" align="center">
      <template #default="scope">
        <el-space>
          <el-button link @click="handleEdit(scope.row)" v-per="'menus_update'" type="primary" size="small">修改</el-button>
          <el-popconfirm v-if="!hasChildren(scope.row)" title="确定要删除吗？" confirm-button-text="删除" cancel-button-text="取消"
            confirm-button-type="danger" cancel-button-type="info" @confirm="handleDel(scope.row.id)" :hide-after="0">
            <template #reference>
              <el-button type="danger" v-per="'menus_remove'"  link size="small">删除</el-button>
            </template>
          </el-popconfirm>
        </el-space>
      </template>
    </el-table-column>
  </el-table>
</div>
</template>
<style scoped lang="less">
.menu-top {
  display: flex;
  justify-content: space-between;
}
</style>
